<template>
  <div class="app-container">
    <!-- 1.选择框 -->
    <el-row :gutter="20">
     <el-col :span="16" :md="8" :sm="12" :xs="18">
       <el-select
         v-model="value"
         filterable
         placeholder="请选择你想了解的区域"
         clearable
         :change="selectRegion(value)"
         :loading="loading"
         :loading-text="'加载中'">
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value">
           <span style="float: left">{{ item.label }}</span>
           <img v-if="item.icon" :src="regionBaseURL + item.icon" style="width: 30px;height: 30px;float: right;">
           <el-tooltip v-else class="item" effect="dark" content="该区域没有图标" placement="right">
            <span class="el-icon-warning" style="font-size: 30px;float: right;color:rgb(230,162,60);"></span>
           </el-tooltip>
         </el-option>
       </el-select>
     </el-col>
    </el-row>
    <div style="margin-top: 20px;"></div>
    <div v-show="currentRegionItemLoading" v-loading="currentRegionItemLoading" style="width:100%;height:100px;"></div>
    <!-- 2.展示内容 -->
    <el-row :gutter="20" v-if="currentRegionItem">
      <!-- 2.1 展示基础数据 -->
      <el-col :span="6" :lg="7" :md="8" :sm="24" :xs="24">
        <RegionDetail :data="currentRegionItem" :heros="currentRegionRelatedHeros" />
      </el-col>
      <!-- 2.2 展示知识图谱 -->
      <el-col :span="18" :lg="17" :md="16" :sm="24" :xs="24">
        <GraphEChart :data="currentRegionRelationship" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { REGION_RELATED_IMAGE_BASE_URL } from '@/const/imageBaseURL'
import { getAllRegionData, getRegionDataByName } from '@/api/region'
import { convertRelationshipDataToEChartData } from '@/echart/convertKGData'
import GraphEChart from '@/components/GraphEChart'
import RegionDetail from './regionDetail'
export default {
  name: 'region',
  components: {
    RegionDetail,
    GraphEChart
  },
  data() {
    return {
      options: [],
      value: '',
      regionData: null,
      loading: true,
      regionBaseURL: REGION_RELATED_IMAGE_BASE_URL,
      currentRegionItem: null,
      currentRegionValue: "",
      currentRegionRelationship: null,
      currentRegionRelatedHeros: null,
      currentRegionItemLoading: false
    }
  },
  mounted() {
    this.fetchAllRegionData()
  },
  methods: {
    // 获取后端数据的函数
    async fetchAllRegionData() {
      const { success = false, data = null } = await getAllRegionData()
      if(!success) {
        this.$message.error("数据传输失败")
        return
      }
      this.loading = false
      this.regionData = data
      this.options = this.processOriginDataToOptions(data)
    },
    async fetchRegionDataByName(regionName) {
      const params = {
        regionName
      }
      this.currentRegionItemLoading = true
      // 重置属性
      this.currentRegionItem = null
      this.currentRegionRelatedHeros = null
      this.currentRegionRelationship = null

      const { success = false, data = null } = await getRegionDataByName(params)
      this.currentRegionItemLoading = false
      if(!success) {
        this.$message.error("数据传输失败")
        return
      }
      const { node = null, relationships = null, heros = null } = data
      this.currentRegionItem = node
      this.currentRegionRelatedHeros = heros
      this.currentRegionRelationship = convertRelationshipDataToEChartData(relationships)
    },
    // 提取原始的数据，形成options
    processOriginDataToOptions(data) {
      const result = []
      for(const item of data) {
        const obj = {
          label: item.name,
          value: item.slug,
          icon: item.crestImage
        }
        result.push(obj)
      }
      return result
    },
    selectRegion(value) {
      if(value == "" || this.currentRegionValue == value) return
      this.currentRegionValue = value
      let regionName = ""
      for(const item of this.options) {
        if(item.value == value) {
          regionName = item.label
        }
      }
      this.fetchRegionDataByName(regionName)
    }
  }
}
</script>

<style scoped>

</style>

